<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.6.7/themes/bootstrap/easyui.css"/>
    <link rel="stylesheet" href="jquery-easyui-1.6.7/themes/icon.css"/>
    <link rel="stylesheet" href="jquery-easyui-1.6.7/themes/icon_expand.css"/>
    <script type="text/javascript" src="jQuery/jquery-3.1.1.min.js"></script>
    <script src="jQuery/jQueryAjaxListenner.js"></script>
    <script type="text/javascript" src="jquery-easyui-1.6.7/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="jquery-easyui-1.6.7/jquery.easyui.expand.js"></script>
    <script type="text/javascript" src="jquery-easyui-1.6.7/locale/easyui-lang-zh_CN.js"></script>
    <link rel="stylesheet" href="css/login.css">
    <style type="text/css">
        .textbox-cls {
            font-size: 18px;
        }
    </style>
</head>
<body>
<!-- 登录框 -->
<div style="display: none;" class="easyui-dialog" id="login">
    <div class="easyui-layout" data-options="fit:true">
        <div data-options="region:'center'" class="form-item-style">
            <form id="login_form" class="fit login-form-item-style" method="POST">
                <div>
                    <p style="font-size: 18px;"><b>用户登录</b></p>
                </div>
                <div>
                    <input name="userAccount" id="userAccount" class="easyui-textbox"
                           data-options="
                            label:'账号：',
                            height:35,
                            labelAlign:'right',
                            iconCls:'icon-man',
                            cls:'textbox-cls',
                            width:400,
                            labelWidth:90,
                             ">
                </div>
                <div>
                    <input name="userName" id="userName" class="easyui-textbox" data-options="
                            label:'姓名：',
                            iconCls:'icon-man',
                            labelWidth:90,
                            cls:'textbox-cls',
                            height:35,
                            labelAlign:'right',
                            width:400,
                            readonly:true,
                            ">
                </div>
                <div>
                    <input name="userPassword" id="userPassword" class="easyui-passwordbox"
                           data-options="
                            label:'密码：',
                            labelAlign:'right',
                            showEye:false,
                            cls:'textbox-cls',
                            height:35,
                            iconCls:'icon-lock',
                            width:400,
                            labelWidth:90,
                            ">
                </div>
                <div>
                    <input id="timer" class="easyui-datebox" data-options="
                            label:'时间：',
                            labelAlign:'right',
                            width:400,
                            height:35,
                            cls:'textbox-cls',
                            value:(function(){
                               let separator = '-';
                               let date = new Date();
                               let year = date.getFullYear();
                               let month = date.getMonth() + 1;
                               let day = date.getDate();
                               return year
                                      + separator
                                      + (month < 10 ? ('0'+month):month)
                                      + separator
                                      + (day < 10 ? ('0'+day):day);
                               })(),
                            readonly:true,
                            labelWidth:90,
                            ">
                </div>
                <div>
                    <a style="margin-left: 90px;background-color: #6b6461;" class="easyui-linkbutton"
                       data-options="width:310,height:35,onClick:onClick">登录</a>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
<script>
    $(function () {
        $("#userAccount").textbox('textbox').css("font-size", "18px");
        $("#userName").textbox('textbox').css("font-size", "18px");
        $("#userPassword").textbox('textbox').css("font-size", "18px");
        $("#timer").textbox('textbox').css("font-size", "18px");

        $("#userAccount").textbox('textbox').focus();
    })
    //  登录
    $('#login').dialog({
        title: '登录',
        width: 520,
        height: 400,
        modal: true,
        border: false,
        noheader: true,
        onOpen: function () {
            $(this).window('center')
        }
    })

    $('#userAccount').textbox({
        inputEvents: $.extend({}, $.fn.textbox.defaults.inputEvents, {
                keyup: function (event) {
                    if (event.keyCode == 13) {
                        $.post('sysUser/account', {account: $('#userAccount').textbox('getValue')}, function (data) {
                            if (!data.success) {
                                $('#userAccount').textbox('textbox').focus();
                            }
                            $('#userName').textbox('setValue', data.message);
                        }, 'json');
                        $('#userPassword').passwordbox('textbox').focus();
                    }
                }
            }
        )
    });

    $('#userPassword').passwordbox({
        inputEvents: $.extend({}, $.fn.passwordbox.defaults.inputEvents, {
                keyup: function (event) {
                    if (event.keyCode == 13) {
                        onClick();
                    }
                }
            }
        )
    });

    /**
     * 登录按钮
     */
    function onClick() {
        $('#login_form').form('submit', {
            url: 'sysUser/login',
            dataType: 'text',
            onSubmit: function (param) {
            },
            success: function (data) {
                data = eval('(' + data + ')');
                if (data.success) {
                    setToken(data.data);
                    setCookie("token", getTokenFromStorage());
                    window.location.href = "index";
                } else {
                    $('#userAccount').textbox('textbox').focus();
                    $.messager.alert('提示', data.message, 'warning');
                }
            }
        })
    }
</script>
</html>